<template>
  <div class="shoppingCart">
    <ul>
      <li>商品</li>
      <li>商品名称</li>
      <li>单价</li>
      <li>数量</li>
      <li>金额</li>
      <li>操作</li>
    </ul>
    <ul class="shoppingCart_box" v-for="(book, index) in books" :key="index">
      <li><img :src="book.imgUrl" alt="" /></li>
      <li>
        <router-link :to="{ name: 'category', params: { id: book.id } }">{{
          book.title
        }}</router-link>
      </li>
      <li>{{ currency(factPrice(book.price, book.discount)) }}</li>
      <li>
        <button @click="deleteSubtract(book)">-</button>
        {{ book.quantity }}
        <button @click="handleAdd(book)">+</button>
      </li>
      <li>
        {{ cartItemPrice(book.id, book.price * book.discount).toFixed(2) }}
      </li>
      <li><button @click="deleteCartItem(book.id)">删除</button></li>
    </ul>
    <p>总金额：{{ currency(cartTotalPrice) }}</p>
  </div>
</template>

<script>
import { mapMutations, mapGetters, mapState } from "vuex";

export default {
  name: "ShoppingCart",
  date() {
    return {  
      zj: 0,
    };
  },
  methods: {
    ...mapMutations("cart", ["incrementItemQuanTity", "deleteCartItem"]),
    handleAdd(book) {
      console.log(book.id);
      this.incrementItemQuanTity({ id: book.id, quantity: 1 });
    },
    deleteSubtract(book) {
      if (book.quantity <= 1) {
        alert('已将该商品删除')
        this.deleteCartItem(book.id);
        return book.quantity = 0;
      }
      this.incrementItemQuanTity({ id: book.id, quantity: -1 });
    },
  },
  computed: {
    ...mapGetters("cart", ["cartTotalPrice", "cartItemPrice"]),
    ...mapState("cart", {
      books: "items",
      zj:'zj'
    }),
  },
  created(){
  },
  inject: ["factPrice", "currency"],
};
</script>

<style>
.shoppingCart {
  width: 100%;
  text-align: center;
  height: 100%;
  border: 2px solid black;
}

.shoppingCart ul {
  background: gray;
  vertical-align: middle;
  overflow: hidden;
}

.shoppingCart img {
  width: 80px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.shoppingCart li {
  float: left;
  width: 16%;
  height: 100%;
  padding: 10px 0;
}

.shoppingCart_box li {
  padding: 34px 0;
}

.shoppingCart_box li:first-of-type {
  padding: 10px 0;
}
.shoppingCart_box {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
</style>
